<template>
    <div class="application-form-container">
        <div class="application-form">
            <div class="header-left">
                <router-link to="/main/xingzheng/gudingzichan" class="back-btn">
                    <i class="el-icon-arrow-left">返回</i> 
                </router-link>
                <div class="save-info">
                    <el-button type="primary" icon="el-icon-check" @click="saveForm">保存</el-button>
                    <el-button type="info" icon="el-icon-printer" @click="printForm">打印</el-button>
                </div>
            </div>
            <h2 style="text-align: center;">文件新增/修订/废止申请单</h2>
            <table class="clauses-table">
                <tr>
                    <td>
                        <span>申请日期：</span>
                    </td>
                    <td title="双击可修改" colspan="2">
                        <template v-if="editingFields.applyDate">
                            <input type="date" v-model="applyDate" @blur="stopEditing('applyDate')">
                        </template>
                        <template v-else>
                            <span @dblclick="startEditing('applyDate')">{{ applyDate }}</span>
                        </template>
                    </td>
                    <td>
                        <span>申请部门：</span>
                    </td>
                    <td title="双击可修改" colspan="2">
                        <template v-if="editingFields.applyDepartment">
                            <input type="text" v-model="applyDepartment" @blur="stopEditing('applyDepartment')">
                        </template>
                        <template v-else>
                            <span @dblclick="startEditing('applyDepartment')">{{ applyDepartment }}</span>
                        </template>
                    </td>
                    <td>
                        <span>申请人：</span>
                    </td>
                    <td title="双击可修改" colspan="2">
                        <template v-if="editingFields.applicant">
                            <input type="text" v-model="applicant" @blur="stopEditing('applicant')">
                        </template>
                        <template v-else>
                            <span @dblclick="startEditing('applicant')">{{ applicant }}</span>
                        </template>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span>文件名称：</span>
                    </td>
                    <td title="双击可修改" colspan="3">
                        <template v-if="editingFields.fileName">
                            <input type="text" v-model="fileName" @blur="stopEditing('fileName')">
                        </template>
                        <template v-else>
                            <span @dblclick="startEditing('fileName')">{{ fileName }}</span>
                        </template>
                    </td>
                    <td>
                        <span>文件编号：</span>
                    </td>
                    <td title="双击可修改" colspan="2">
                        <template v-if="editingFields.fileNumber">
                            <input type="text" v-model="fileNumber" @blur="stopEditing('fileNumber')">
                        </template>
                        <template v-else>
                            <span @dblclick="startEditing('fileNumber')">{{ fileNumber }}</span>
                        </template>
                    </td>
                    <td>
                        <span>版本：</span>
                    </td>
                    <td title="双击可修改">
                        <template v-if="editingFields.version">
                            <input type="text" v-model="version" @blur="stopEditing('version')">
                        </template>
                        <template v-else>
                            <span @dblclick="startEditing('version')">{{ version }}</span>
                        </template>
                    </td>
                </tr>
            </table>
            <table class="clauses-table">
                <thead>
                    <tr>
                        <td style="border-top: 0px;">
                            <span>申请类别</span>
                        </td>
                        <td colspan="2" style="border-top: 0px;">
                            <label><input type="radio" v-model="applyType" value="新增"> 新增</label>
                            <label><input type="radio" v-model="applyType" value="修订"> 修订</label>
                            <label><input type="radio" v-model="applyType" value="废止"> 废止</label>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span>申请原因</span>
                        </td>
                        <td colspan="2">
                            <textarea v-model="applyReason"></textarea>
                        </td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>具体条款</td>
                        <td>原文件内容</td>
                        <td>现文件内容</td>
                    </tr>
                    <tr>
                        <td><input type="text" v-model="clauseItem.clause" /></td>
                        <td><textarea v-model="clauseItem.originalContent"></textarea></td>
                        <td><textarea v-model="clauseItem.currentContent"></textarea></td>
                    </tr>
                </tbody>
            </table>
            <table class="clauses-table">
                <tr>
                    <th colspan="5" style="border-top: 0px;">
                        <span>会审意见</span>
                    </th>
                </tr>
                <tr v-for="(opinion, index) in reviewOpinionList" :key="index">
                    <td class="department-cell">
                        <label><input type="checkbox">{{ opinion.department }}</label>
                    </td>
                    <td colspan="4">
                        <span style="display: flex;margin-left: 30px;">
                            <label><input type="radio" v-model="opinion.approve" value="同意"> 同意</label>&emsp;&emsp;
                            <label><input type="radio" v-model="opinion.approve" value="不同意"> 不同意</label>
                        </span><br>
                        <span style="display: inline-flex; ">主要意见是：
                            <textarea rows="5" cols="100" v-model="opinion.comment"></textarea></span><br>
                        <span style="display: flex;
      align-items: center;
      justify-content: flex-end;padding: 10px 0px;">
                            <span>会审人：</span>
                            <input type="text" v-model="opinion.reviewer">
                            <span>日期：</span>
                            <input type="date" v-model="opinion.date">
                        </span>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <span class="explanation">
                            <span>说明：1、各会审人需在两个工作日内回复，未作回复则视同认可。2、表单不用经各会审意见。</span>
                        </span>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</template>

<script>
export default {
    name: 'DocumentApplicationForm',
    data() {
        return {
            applyDate: '2014年11月15日',
            applyDepartment: '   财务管理部',
            applicant: '',
            fileName: '固定资产核算流程',
            fileNumber: 'AM-F-JY-05',
            version: 'B/0',
            applyType: '修订',
            applyReason: '增强其文件的适宜性。',
            clauseItem: {
                clause: '',
                originalContent: '',
                currentContent: ''
            },
            reviewOpinionList: [
                { department: '总经理室', approve: '', comment: '', reviewer: '', date: '' },
                { department: '管理者代表', approve: '', comment: '', reviewer: '', date: '' },
                { department: '企业管理部', approve: '', comment: '', reviewer: '', date: '' },
                { department: '财务管理部', approve: '', comment: '', reviewer: '', date: '' },
                { department: '工会', approve: '', comment: '', reviewer: '', date: '' },
                { department: '手机事业部', approve: '', comment: '', reviewer: '', date: '' },
                { department: '光电事业部', approve: '', comment: '', reviewer: '', date: '' },
            ],
            editingFields: {
                applyDate: false,
                applyDepartment: false,
                applicant: false,
                fileName: false,
                fileNumber: false,
                version: false
            }
        };
    },
    methods: {
        startEditing(field) {
            this.editingFields[field] = true;
        },
        stopEditing(field) {
            this.editingFields[field] = false;
        },
        printForm() {
            window.print()
        },
        saveForm() {
            console.log('保存文件申请单', {
                applyDate: this.applyDate,
                applyDepartment: this.applyDepartment,
                applicant: this.applicant,
                fileName: this.fileName,
                fileNumber: this.fileNumber,
                version: this.version,
                applyType: this.applyType,
                applyReason: this.applyReason,
                clauseItem: this.clauseItem,
                reviewOpinionList: this.reviewOpinionList
            });
        }
    }
};
</script>

<style scoped lang="scss">
.application-form-container {
    font-family: '宋体', sans-serif;
    padding: 20px;
}

.application-form {
    width: 1200px;
    margin: 0 auto;
}

.header-left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #409EFF;

    i {
        color: #409EFF;
    }

}

.form-info {
    display: flex;
    margin-bottom: 15px;
}

.info-item {
    margin-right: 30px;
}

.apply-details {
    margin-bottom: 15px;
}

.category,
.reason {
    margin-bottom: 10px;
}

.clauses-table {
    width: 100%;
    border-collapse: collapse;
    /* margin-bottom: 15px; */
}

.clauses-table th,
.clauses-table td {
    border: 1px solid #000;
    padding: 8px;
    text-align: center;
}

.review-opinions {
    margin-bottom: 15px;
}

.opinion-item {
    margin-bottom: 10px;
}

.explanation {
    margin-bottom: 15px;
}

.save-info {
    margin-top: 15px;
}

.save-info button {
    padding: 8px 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
}

.department-cell {
    width: 200px;
}

@media print {
    .application-form {
        width: 1000px;
        margin: 0px;
    }

    .header-left {
        display: none;
    }

    .department-cell {
        width: 100px;
    }

    table {
        margin: 0px 0px;
    }

    .info-table,
    .content-table,
    .approval-table {
        border: 1px solid #000;

        td,
        th {
            border: 1px solid #000;
        }
    }

    td,
    th {
        padding: 5px;
        border: 1px solid #000;
    }

    input {
        border: none !important;
        background-color: transparent !important;
        text-align: center;
    }

    textarea {
        border: 0px !important;
        width: 80%;
        padding: 5px;
        height: 50px;
        max-height: 900px;
    }
}
</style>